<template>
	<div>
		<div >
			<div class="share" v-show="dialog"  @tap="hide"></div>
			<transition name="slideup">
				<div class="content" v-show="dialog">
					<div>
						分享到
					</div>
					<!--<div class="social-share"></div>		
					<div class="social-share" data-wechat-qrcode-title="请打开微信扫一扫"></div>-->
					<!--<div class="datasetconfig" data-title="分享标题" data-sites="yixin,weibo,weixin,tqq,qzone"></div>-->
					<div>
						<div class="soshm-item" @click="weixin">
							<img src="../../static/img/icon/home_icon/weixin@3x.png"/>
							<div>微信</div>
						</div>
						<div class="soshm-item" @click="qzone">
							<img src="../../static/img/icon/home_icon/qq@3x.png"/>
							<div>qq空间</div>
						</div>
						<div class="soshm-item" @click="weibo">
							<img src="../../static/img/icon/home_icon/weibo@3x.png"/>
							<div>微博</div>
						</div>
						<div class="soshm-item" @click="qqShare">
							<img src="../../static/img/icon/home_icon/qq@3x.png"/>
							<div>qq</div>
						</div>
					</div>
					<div class="close" @click.stop="hide">取消</div>
				</div>
			</transition>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			dialog: Boolean,
			default: false
		},
		methods: {
			hide() {
				this.$emit('hide')
			},
			qzone() {
				this.route('share','','qzone')
			},
			weibo() {
				this.route('share','','weibo')
			},
			qqShare() {
				let Base64 = require('js-base64').Base64;
				const share = {
				    title: '分享标题',
				    desc: '分享内容',
				    share_url: '分享链接'
				};
				const url_scheme = '//share/to_fri?src_type=web&version=1&file_type=news&share_id=1103437993&title=' + Base64.encode(share.title) + '&thirdAppDisplayName=5o6M5LiK55CG5bel5aSn&url=' + Base64.encode(share.share_url) + '&description=' + Base64.encode(share.desc);
				location.assign('mqqapi:' + url_scheme);
				setTimeout(function() {
				  location.assign('timapi:' + url_scheme);
				}, 2000);

			},
			weixin() {
//				wx.config({
//				    debug: false,
//				    appId: 'wx407770e4e585eaef',
//				    timestamp: '时间戳',
//				    nonceStr: '随机字符串',
//				    signature: '签名',
//				    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'showOptionMenu', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem']
//				});
//				
//				wx.ready(function() {
//				    const share = {
//				        title: '分享标题（朋友圈只显示标题）',
//				        desc: '分享内容',
//				        imgUrl: '图片URL',
//				        link: '分享链接（最好是后台JS安全域名）',
//				        success: function() {
//				            hideMaskLayer();  // 分享成功，隐藏引导用户分享的浮层
//				        },
//				        cancel: function() {
//				        }
//				    };
//				    wx.onMenuShareAppMessage(share);  // 微信好友
//				    wx.onMenuShareTimeline(share);  // 朋友圈
//				    wx.onMenuShareQQ(share);  // QQ
//				    wx.onMenuShareQZone(share);  // QQ空间
//				    wx.onMenuShareWeibo(share);  // 腾讯微博
//				});
			},
		}
	}
</script>

<style scoped lang="less">
	.slideup-enter-active{
        animation-name: slideInUp;
        animation-duration: .2s;
        animation-fill-mode: both
    }
    .slideup-leave-active {
        animation-name: slideOutDown;
        animation-duration: .5s;
        animation-fill-mode: both
    }
    @keyframes slideInUp {
        0% {
            transform: translate3d(0,100%,0);
            visibility: visible
        }

        to {
            transform: translateZ(0)
        }
    }
    @keyframes slideOutDown {
        0% {
            transform: translateZ(0)
        }

        to {
            visibility: hidden;
            transform: translate3d(0,100%,0)
        }
    }
	.delay-leave-active{
        /*-webkit-animation-delay: .2s;
        -moz-animation-delay: .2s;
        -o-animation-delay: .2s;
        animation-delay: .2s;*/
       	transition: opacity 0.5s;
        opacity: 0;
    }
	
	.share {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.6);
		z-index: 1000;
	}
		
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: fixed;
		background: #eee;
		z-index: 1001;
		bottom: 0;
		/*height: 50px;*/
		width: 100%;
		
		div:first-child {
			padding: 10px 20px;
		}
		
		div:nth-child(2) {
			margin: 0;
			display: flex;
			justify-content: center;
			padding: 5px 0 ;
			align-items: center;
			
			div {
				border: 0;
				padding: 0;
			}
		}
		
		div:last-child {
			display: flex;
			justify-content: center;
			padding: 10px;
			border-top: 1px solid #e5e5e5;
		}
		
		.close {
			background: #fff;
		}
	}
</style>